JavaScriptã®éåæãã¿ãŒã³ãããã³ã°ã®é²åãæ¢ããçŸåšã®åé¿çããå°æ¥ã®ææ¡ãŸã§ãã°ããŒãã«éçºããŒã ã®ããã«éåæããŒã¿åŠçããšã©ãŒç®¡çãã³ãŒãã®å¯èªæ§ãåäžãããŸãã
JavaScriptéåæãã¿ãŒã³ãããã³ã°ïŒéåæãã¿ãŒã³ã®è©äŸ¡
ãœãããŠã§ã¢éçºã®ã°ããŒãã«ãªã¿ãã¹ããªãŒã«ãããŠãã¢ããªã±ãŒã·ã§ã³ã¯ãªã¢ã«ã¿ã€ã ããŒã¿ããããã¯ãŒã¯ãªã¯ãšã¹ããè€éãªãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ã«ãŸããŸãäŸåããããã«ãªããéåææäœã¯åãªãæ©èœã§ã¯ãªãããŸãã«ãã®æ ¹å¹¹ããªããã®ãšãªã£ãŠããŸããã€ãã³ãã«ãŒããšã·ã³ã°ã«ã¹ã¬ãããšããæ§è³ªãæã£ãŠçãŸããJavaScriptã¯ãéåææ§ã管çããããã«åçã«é²åããã³ãŒã«ããã¯ããPromisesããããŠãšã¬ã¬ã³ããªasync/awaitæ§æãžãšç§»è¡ããŠããŸãããããããéåæããŒã¿ãããŒãããè€éã«ãªãã«ã€ããŠãããŒã¿ã®ããŸããŸãªç¶æ
ã圢ç¶ãè©äŸ¡ããããã«å¯Ÿå¿ããããã®å
ç¢ã§è¡šçŸåè±ããªæ¹æ³ãå¿
èŠäžå¯æ¬ ã«ãªã£ãŠããŸããããã§èå
ãæµŽã³ãã®ããç¹ã«éåæã³ã³ããã¹ãã«ããããã¿ãŒã³ãããã³ã°ãšããæŠå¿µã§ãã
ãã®å æ¬çãªã¬ã€ãã§ã¯ãJavaScriptã®éåæãã¿ãŒã³ãããã³ã°ã®äžçãæ·±ãæãäžããŸãããã¿ãŒã³ãããã³ã°ãäœãæå³ããã®ãããããäŒçµ±çã«ã©ã®ããã«ã³ãŒãã匷åããã®ãããããŠæ±ºå®çã«ããã®ååãJavaScriptã«ããããã°ãã°å°é£ãªéåæããŒã¿è©äŸ¡ã®é åã«ã©ã®ããã«é©çšãããå©çãããããããšãã§ããã®ããæ¢æ±ããŸãããã¿ãŒã³ãããã³ã°ãã·ãã¥ã¬ãŒãããçŸåšã®ãã¯ããã¯ãããå°æ¥ã®èšèªææ¡ã®ãšããµã€ãã£ã³ã°ãªå±æãŸã§ãã°ããŒãã«ãªéçºã³ã³ããã¹ãã«é¢ããããããã¯ãªãŒã³ã§ãããå埩åããããããä¿å®æ§ã®é«ãéåæã³ãŒããæžãããã®ç¥èã身ã«ã€ããŠããã ããŸãã
ãã¿ãŒã³ãããã³ã°ã®çè§£ïŒéåæåŠçãæ¥µããããã®åºç€
ãasyncãã®åŽé¢ã«æ²¡é ããåã«ããã¿ãŒã³ãããã³ã°ãšã¯äœãããããŠãªããããå€ãã®ããã°ã©ãã³ã°ãã©ãã€ã ã§åæãããæ©èœãªã®ããæç¢ºã«çè§£ããŠãããŸãããã
ãã¿ãŒã³ãããã³ã°ãšã¯ïŒ
ãã®æ žå¿ã«ãããŠããã¿ãŒã³ãããã³ã°ã¯ãããã°ã©ã ãå€ãæ€æ»ãããã®æ§é ãç¹æ§ã倿ãããã®å€æããããã¿ãŒã³ã«åºã¥ããŠã³ãŒãã®ç°ãªãåå²ãå®è¡ã§ããããã«ãã匷åãªèšèªæ§é ã§ããããã¯åãªã髿©èœãªswitchæä»¥äžã®ãã®ã§ããã以äžã®ããã®ã¡ã«ããºã ã§ãïŒ
- åè§£ïŒDeconstructionïŒ: ããŒã¿æ§é ïŒãªããžã§ã¯ããé åãªã©ïŒããç¹å®ã®ã³ã³ããŒãã³ããæœåºããã
- èå¥ïŒDiscriminationïŒ: ããŒã¿ã®ç°ãªã圢åŒãåãåºå¥ããã
- æçžïŒBindingïŒ: ãããããå€ã®äžéšãæ°ãã倿°ã«å²ãåœãŠããããªã䜿çšã«äŸããã
- ã¬ãŒãïŒGuardingïŒ: ãããã现ãããªå¶åŸ¡ã®ããã«ãã¿ãŒã³ã«æ¡ä»¶ãã§ãã¯ã远å ããã
è€éãªããŒã¿æ§é ïŒAPIã¬ã¹ãã³ã¹ããŠãŒã¶ãŒå
¥åãªããžã§ã¯ãããªã¢ã«ã¿ã€ã ãµãŒãã¹ããã®ã€ãã³ããªã©ïŒãåãåãããšãæ³åããŠã¿ãŠãã ããããã¿ãŒã³ãããã³ã°ããªããã°ãããããã£ã®ååšãåãç¹å®ã®å€ã確èªããäžé£ã®if/else ifæãæžãããšã«ãªããããããŸãããããã¯ããã«åé·ã§ããšã©ãŒãçºçãããããèªã¿ã«ãããªãå¯èœæ§ããããŸãããã¿ãŒã³ãããã³ã°ã¯ããã®ãããªã·ããªãªãåŠçããããã®å®£èšçã§ããã°ãã°ããç°¡æœãªæ¹æ³ãæäŸããŸãã
ãªããã¿ãŒã³ãããã³ã°ã¯ããã»ã©äŸ¡å€ãããã®ãïŒ
ãã¿ãŒã³ãããã³ã°ã®å©ç¹ã¯ããœãããŠã§ã¢å質ã®ããŸããŸãªåŽé¢ã«åã³ãŸãïŒ
- å¯èªæ§ã®åäž: æå³ãæç¢ºã«è¡šçŸããããšã§ãã³ãŒããäžç®ã§çè§£ãããããªããåœä»€çãªã¹ãããã§ã¯ãªããã«ãŒã«ãã®éåã®ããã«èŠããŸãã
- ä¿å®æ§ã®æ¹å: ããŒã¿æ§é ãããžãã¹ããžãã¯ã®å€æŽã¯ããã°ãã°ç¹å®ã®ãã¿ãŒã³ã«éå®ã§ããæ³¢åå¹æãæžå°ãããŸãã
- å ç¢ãªãšã©ãŒãã³ããªã³ã°: ç¶²çŸ çãªãã¿ãŒã³ãããã³ã°ã¯ãéçºè ã«ãšããžã±ãŒã¹ããšã©ãŒæ¡ä»¶ãå«ããã¹ãŠã®å¯èœãªç¶æ ãèæ ®ããããããããå ç¢ãªã¢ããªã±ãŒã·ã§ã³ã«ã€ãªãããŸãã
- ç¶æ 管çã®ç°¡çŽ å: è€éãªç¶æ ãæã€ã¢ããªã±ãŒã·ã§ã³ã§ã¯ããã¿ãŒã³ãããã³ã°ã¯åä¿¡ã€ãã³ããããŒã¿ã«åºã¥ããŠç¶æ éããšã¬ã¬ã³ãã«é·ç§»ãããããšãã§ããŸãã
- ãã€ã©ãŒãã¬ãŒãã®åæž: è€æ°ã®æ¡ä»¶ããžãã¯ã倿°ä»£å ¥ã®è¡ããåäžã®è¡šçŸåè±ããªæ§é ã«åçž®ããããšããããããŸãã
- ãã匷åãªåå®å šæ§ïŒç¹ã«TypeScriptãšå ±ã«ïŒ: åã·ã¹ãã ãšçµã¿åãããããšã§ããã¿ãŒã³ãããã³ã°ã¯ãã¹ãŠã®å¯èœãªåãåŠçãããããšãä¿èšŒããã©ã³ã¿ã€ã ãšã©ãŒãæžå°ãããã®ã«åœ¹ç«ã¡ãŸãã
RustãElixirãScalaãHaskellãããã«ã¯C#ã®ãããªèšèªã«ã¯ãè€éãªããŒã¿åŠçãå€§å¹ ã«ç°¡çŽ åããå ç¢ãªãã¿ãŒã³ãããã³ã°æ©èœããããŸããã°ããŒãã«ãªéçºè ã³ãã¥ããã£ã¯ãã®åãé·ãéèªèããŠãããJavaScriptéçºè ãåæ§ã®æ©èœããŸããŸãæ±ããŠããŸãã
éåæã®èª²é¡ïŒãªãéåæãã¿ãŒã³ãããã³ã°ãéèŠãªã®ã
JavaScriptã®éåææ§ã¯ãããŒã¿è©äŸ¡ã«é¢ããŠç¬ç¹ã®è€éãããããããŸããããŒã¿ã¯åã«ãå°çãããã®ã§ã¯ãªããæçµçã«å°çããŸããããã¯æåãããããããªããã倱æãããããããªãããä¿çäžã®ãŸãŸãããããŸãããããã¯ãã©ã®ãããªãã¿ãŒã³ãããã³ã°ã¡ã«ããºã ããããã«ã¯å©çšã§ããªããå€ãããéåæã®ç¶æ ã«åºã¥ããŠããã¿ãŒã³ããå€åããå¯èœæ§ã®ãããå€ããåªé ã«åŠçã§ããªããã°ãªããªãããšãæå³ããŸãã
JavaScriptã«ãããéåææ§ã®é²å
JavaScriptã®éåææ§ãžã®ã¢ãããŒãã¯å€§å¹ ã«æçããŸããïŒ
- ã³ãŒã«ããã¯: æãåæã®åœ¢åŒã§ãæ·±ããã¹ããããéåææäœã§ãã³ãŒã«ããã¯å°çããåŒãèµ·ãããŸããã
- Promises: pendingãfulfilledãrejectedãšãã£ãç¶æ ãæã€ãæçµçãªå€ãåŠçããããã®ããæ§é åãããæ¹æ³ãå°å ¥ããŸããã
async/await: Promisesã®äžã«æ§ç¯ãããéåæã³ãŒãã«åæçã®ãããªæ§æãæäŸããã¯ããã«èªã¿ããã管çããããããŸããã
async/awaitã¯ç§ãã¡ãéåæã³ãŒããæžãæ¹æ³ãé©åœçã«å€ããŸããããããã¯äŸç¶ãšããŠäž»ã«å€ãæ¥ãã®ã*åŸ
ã€*ããšã«çŠç¹ãåœãŠãŠããŸããawaitããããšã解決ãããå€ãåŸããããã®åŸãåŸæ¥ã®åæããžãã¯ãé©çšããŸãã課é¡ãçããã®ã¯ãéåææäœèªäœã®*ç¶æ
*ïŒäŸïŒãŸã èªã¿èŸŒã¿äžãããŒã¿Xã§æåããšã©ãŒYã§å€±æïŒãã解決åŸã«ã®ã¿å€æããããŒã¿ã®æçµçãª*圢ç¶*ã«å¯ŸããŠãããã³ã°ãè¡ãå¿
èŠãããå Žåã§ãã
éåæãã¿ãŒã³è©äŸ¡ãå¿ èŠãšããã·ããªãªïŒ
ã°ããŒãã«ãªã¢ããªã±ãŒã·ã§ã³ã«ãããäžè¬çãªå®äžçã®ã·ããªãªãèããŠã¿ãŸãããïŒ
- APIã¬ã¹ãã³ã¹: APIã³ãŒã«ã¯ãç¹å®ã®ããŒã¿ãæã€
200 OKã401 Unauthorizedã404 Not FoundããŸãã¯500 Internal Server Errorãè¿ããããããŸãããåã¹ããŒã¿ã¹ã³ãŒããšããã«ä»éãããã€ããŒãã¯ãç°ãªãåŠçæŠç¥ãå¿ èŠãšããŸãã - ãŠãŒã¶ãŒå
¥åã®æ€èšŒ: éåæã®æ€èšŒãã§ãã¯ïŒäŸïŒããŒã¿ããŒã¹ã«å¯ŸããŠãŠãŒã¶ãŒåã®å©çšå¯èœæ§ããã§ãã¯ããïŒã¯ã
{ status: 'valid' }ã{ status: 'invalid', reason: 'taken' }ããŸãã¯{ status: 'error', message: 'server_down' }ãè¿ããããããŸããã - ãªã¢ã«ã¿ã€ã ã€ãã³ãã¹ããªãŒã : WebSocketsçµç±ã§å°çããããŒã¿ã¯ãç°ãªããã€ãã³ãã¿ã€ããïŒäŸïŒ
'USER_JOINED'ã'MESSAGE_RECEIVED'ã'ERROR'ïŒãæã€å¯èœæ§ãããããããããç¬èªã®ããŒã¿æ§é ãæã£ãŠããŸãã - UIã«ãããç¶æ 管ç: ããŒã¿ããã§ããããã³ã³ããŒãã³ãã¯ããLOADINGãããSUCCESSãããŸãã¯ãERRORãã®ç¶æ ã«ããå¯èœæ§ãããããã°ãã°ç¶æ ã«åºã¥ããŠç°ãªãããŒã¿ãå«ããªããžã§ã¯ãã§è¡šçŸãããŸãã
ãããã®ãã¹ãŠã®ã±ãŒã¹ã§ãç§ãã¡ã¯åã«*ãã*å€ãåŸ ã£ãŠããã®ã§ã¯ãªãã*ãã¿ãŒã³ã«é©åãã*å€ãåŸ ã£ãŠãããããã«å¿ããŠè¡åããŠããŸãããããéåæãã¿ãŒã³è©äŸ¡ã®æ¬è³ªã§ãã
çŸåšã®JavaScriptïŒéåæãã¿ãŒã³ãããã³ã°ã®ã·ãã¥ã¬ãŒã·ã§ã³
JavaScriptã«ã¯ãŸã ãã€ãã£ããªãããã¬ãã«ã®ãã¿ãŒã³ãããã³ã°ããããŸããããéçºè ãã¡ã¯é·ãéãéåæã³ã³ããã¹ãã§ããããã®æ¯ãèããã·ãã¥ã¬ãŒãããå·§åŠãªæ¹æ³ãèæ¡ããŠããŸããããããã®ãã¯ããã¯ã¯ã仿¥ã®å€ãã®ã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ãè€éãªéåæããžãã¯ãåŠçããæ¹æ³ã®åºç€ã圢æããŠããŸãã
1. async/awaitãšåå²ä»£å
¥
ES2015ã§å°å
¥ããããªããžã§ã¯ããšé
åã®åå²ä»£å
¥ã¯ãæ§é çãã¿ãŒã³ãããã³ã°ã®åºæ¬çãªåœ¢åŒãæäŸããŸããasync/awaitãšçµã¿åãããããšã§ã解決ãããéåææäœããããŒã¿ãæœåºããããã®åŒ·åãªããŒã«ã«ãªããŸãã
async function processApiResponse(responsePromise) {
try {
const response = await responsePromise;
const { status, data, error } = response;
if (status === 200 && data) {
console.log('Data successfully received:', data);
// Further processing with 'data'
} else if (status === 404) {
console.error('Resource not found.');
} else if (error) {
console.error('An error occurred:', error.message);
} else {
console.warn('Unknown response status:', status);
}
} catch (e) {
console.error('Network or unhandled error:', e.message);
}
}
// Example usage:
const successResponse = Promise.resolve({ status: 200, data: { id: 1, name: 'Product A' } });
const notFoundResponse = Promise.resolve({ status: 404 });
const errorResponse = Promise.resolve({ status: 500, error: { message: 'Server error' } });
processApiResponse(successResponse);
processApiResponse(notFoundResponse);
processApiResponse(errorResponse);
ããã§ã¯ãåå²ä»£å
¥ã«ãã£ãŠ*解決ããã*ã¬ã¹ãã³ã¹ãªããžã§ã¯ãããstatusãdataãerrorãå³åº§ã«æœåºã§ããŸãããã®åŸã®if/else ifãã§ãŒã³ãããããã®æœåºãããå€ã«å¯Ÿããããã¿ãŒã³ãããã£ãŒããšããŠæ©èœããŸãã
2. ã¬ãŒãä»ãã®é«åºŠãªæ¡ä»¶ããžãã¯
if/else ifãè«çæŒç®åïŒ&&ã||ïŒãšçµã¿åãããããšã§ããã€ãã£ãã®ãã¿ãŒã³ãããã³ã°ã§èŠããããããªãããè€éãªãã¬ãŒããæ¡ä»¶ãå¯èœã«ãªããŸãã
async function handlePaymentStatus(paymentPromise) {
const result = await paymentPromise;
if (result.status === 'success' && result.amount > 0) {
console.log(`Payment successful for ${result.amount} ${result.currency}. Transaction ID: ${result.transactionId}`);
// Send confirmation email, update order status
} else if (result.status === 'failed' && result.reason === 'insufficient_funds') {
console.error('Payment failed: Insufficient funds. Please top up your account.');
// Prompt user to update payment method
} else if (result.status === 'pending' && result.attempts < 3) {
console.warn('Payment pending. Retrying in a moment...');
// Schedule a retry
} else if (result.status === 'failed') {
console.error(`Payment failed for an unknown reason: ${result.reason || 'N/A'}`);
// Log error, notify admin
} else {
console.log('Unhandled payment status:', result);
}
}
// Example usage:
handlePaymentStatus(Promise.resolve({ status: 'success', amount: 100, currency: 'USD', transactionId: 'TXN123' }));
handlePaymentStatus(Promise.resolve({ status: 'failed', reason: 'insufficient_funds' }));
handlePaymentStatus(Promise.resolve({ status: 'pending', attempts: 1 }));
ãã®ã¢ãããŒãã¯æ©èœçã§ããããã¿ãŒã³ãšæ¡ä»¶ã®æ°ãå¢ããã«ã€ããŠåé·ã§æ·±ããã¹ããããå¯èœæ§ããããŸãããŸããç¶²çŸ çãªãã§ãã¯ãæ¬è³ªçã«å°ããã®ã§ããããŸããã
3. 颿°åãã¿ãŒã³ãããã³ã°ã®ããã®ã©ã€ãã©ãªã®äœ¿çš
ããã€ãã®ã³ãã¥ããã£äž»å°ã®ã©ã€ãã©ãªã¯ããã颿°çã§è¡šçŸåè±ããªãã¿ãŒã³ãããã³ã°æ§æãJavaScriptã«ããããããšè©Šã¿ãŠããŸãã人æ°ã®ããäŸã®äžã€ãts-patternã§ãïŒããã¯TypeScriptãšãã¬ãŒã³ãªJavaScriptã®äž¡æ¹ã§åäœããŸãïŒããããã®ã©ã€ãã©ãªã¯éåžžã*解決ããã*ãå€ãã«å¯ŸããŠæäœãè¡ãããããŸãéåææäœãawaitãããã®åŸãã¿ãŒã³ãããã³ã°ãé©çšããŸãã
// Assuming 'ts-pattern' is installed: npm install ts-pattern
import { match, P } from 'ts-pattern';
async function processSensorData(dataPromise) {
const data = await dataPromise; // Await the async data
return match(data)
.with({ type: 'temperature', value: P.number.gte(30) }, (d) => {
console.log(`High temperature alert: ${d.value}°C in ${d.location || 'unknown'}`);
return 'ALERT_HIGH_TEMP';
})
.with({ type: 'temperature', value: P.number.lte(0) }, (d) => {
console.log(`Low temperature alert: ${d.value}°C in ${d.location || 'unknown'}`);
return 'ALERT_LOW_TEMP';
})
.with({ type: 'temperature' }, (d) => {
console.log(`Normal temperature: ${d.value}°C`);
return 'NORMAL_TEMP';
})
.with({ type: 'humidity', value: P.number.gte(80) }, (d) => {
console.log(`High humidity alert: ${d.value}%`);
return 'ALERT_HIGH_HUMIDITY';
})
.with({ type: 'humidity' }, (d) => {
console.log(`Normal humidity: ${d.value}%`);
return 'NORMAL_HUMIDITY';
})
.with(P.nullish, () => {
console.error('No sensor data received.');
return 'ERROR_NO_DATA';
})
.with(P.any, (d) => {
console.warn('Unknown sensor data pattern:', d);
return 'UNKNOWN_DATA';
})
.exhaustive(); // Ensures all patterns are handled
}
// Example usage:
processSensorData(Promise.resolve({ type: 'temperature', value: 35, location: 'Server Room' }));
processSensorData(Promise.resolve({ type: 'humidity', value: 92 }));
processSensorData(Promise.resolve({ type: 'light', value: 500 }));
processSensorData(Promise.resolve(null));
ts-patternã®ãããªã©ã€ãã©ãªã¯ãã¯ããã«å®£èšçã§èªã¿ãããæ§æãæäŸããè€éãªåæãã¿ãŒã³ãããã³ã°ã®ããã®åªããéžæè¢ãšãªããŸããéåæã·ããªãªã§ã®ãã®é©çšã¯ãéåžžãmatch颿°ãåŒã³åºã*å*ã«Promiseã解決ããããšãå«ã¿ãŸããããã«ããããåŸ
æ©ãéšåãšããããã³ã°ãéšåã广çã«åé¢ãããŸãã
æªæ¥ïŒJavaScriptã®ãã€ãã£ããã¿ãŒã³ãããã³ã°ïŒTC39ææ¡ïŒ
JavaScriptã³ãã¥ããã£ã¯ãTC39å§å¡äŒãéããŠãèšèªã«ç¬¬äžçŽã®çµã¿èŸŒã¿ãœãªã¥ãŒã·ã§ã³ãããããããšãç®æããã€ãã£ããã¿ãŒã³ãããã³ã°ææ¡ã«ç©æ¥µçã«åãçµãã§ããŸããçŸåšã¹ããŒãž1ã«ãããã®ææ¡ã¯ããå€ããåè§£ãæ¡ä»¶ä»ãã§è©äŸ¡ããããã®ãããçŽæ¥çã§è¡šçŸåè±ããªæ¹æ³ãæ§æ³ããŠããŸãã
ææ¡ãããŠããæ§æã®äž»ãªç¹åŸŽ
æ£ç¢ºãªæ§æã¯é²åããå¯èœæ§ããããŸãããææ¡ã®å
šäœçãªåœ¢ã¯matchåŒãäžå¿ã«å±éãããŸãïŒ
const value = ...;
match (value) {
when pattern1 => expression1,
when pattern2 if guardCondition => expression2,
when [a, b, ...rest] => expression3,
when { prop: 'value' } => expression4,
when default => defaultExpression
}
äž»ãªèŠçŽ ã¯ä»¥äžã®éãã§ãïŒ
matchåŒ: è©äŸ¡ã®ãšã³ããªãŒãã€ã³ããwhenç¯: ããããããåã ã®ãã¿ãŒã³ãå®çŸ©ããã- å€ãã¿ãŒã³: ãªãã©ã«ãªãå€ãïŒ
1,'hello',trueïŒãšããããããã - åè§£ãã¿ãŒã³: ãªããžã§ã¯ãïŒ
{ x, y }ïŒãé åïŒ[a, b]ïŒã®æ§é ãšãããããããå€ãã®æœåºãå¯èœã«ããã - æ®äœ/ã¹ãã¬ãããã¿ãŒã³: é
åã®æ®ãã®èŠçŽ ïŒ
...restïŒããªããžã§ã¯ãã®ããããã£ïŒ...restïŒããã£ããã£ããã - ã¯ã€ã«ãã«ãŒãïŒ
_ïŒ: 倿°ã«æçžããã«ä»»æã®å€ãšãããããã - ã¬ãŒãïŒ
ifããŒã¯ãŒãïŒ: ãã¿ãŒã³ã®ããããããæŽç·Žãããããã®ä»»æã®æ¡ä»¶åŒãå¯èœã«ããã defaultã±ãŒã¹: 以åã®ãã¿ãŒã³ã«ãããããªãã£ãä»»æã®å€ããã£ããããç¶²çŸ æ§ãä¿èšŒããã
ãã€ãã£ããã¿ãŒã³ãããã³ã°ã«ããéåæãã¿ãŒã³è©äŸ¡
ãã®ãã€ãã£ããã¿ãŒã³ãããã³ã°ãJavaScriptã®éåææ©èœãšã©ã®ããã«çµ±åãããããèãããšãçã®åãçŸããŸããææ¡ã®äž»ãªçŠç¹ã¯åæãã¿ãŒã³ãããã³ã°ã§ããã*解決ããã*éåæã®ãå€ããžã®é©çšã¯å³æãã€æ·±é ãªãã®ã«ãªãã§ããããéèŠãªç¹ã¯ãPromiseãawaitãã*åŸ*ã«ãã®çµæãmatchåŒã«æž¡ãå¯èœæ§ãé«ããšããããšã§ãã
async function handlePaymentResponse(paymentPromise) {
const response = await paymentPromise; // Resolve the promise first
return match (response) {
when { status: 'SUCCESS', transactionId } => {
console.log(`Payment successful! Transaction ID: ${transactionId}`);
return { type: 'success', transactionId };
},
when { status: 'FAILED', reason: 'INSUFFICIENT_FUNDS' } => {
console.error('Payment failed: Insufficient funds.');
return { type: 'error', code: 'INSUFFICIENT_FUNDS' };
},
when { status: 'FAILED', reason } => {
console.error(`Payment failed for reason: ${reason}`);
return { type: 'error', code: reason };
},
when { status: 'PENDING', retriesRemaining: > 0 } if response.retriesRemaining < 3 => {
console.warn('Payment pending, retrying...');
return { type: 'pending', retries: response.retriesRemaining };
},
when { status: 'ERROR', message } => {
console.error(`System error processing payment: ${message}`);
return { type: 'system_error', message };
},
when _ => {
console.warn('Unknown payment response:', response);
return { type: 'unknown', data: response };
}
};
}
// Example usage:
handlePaymentResponse(Promise.resolve({ status: 'SUCCESS', transactionId: 'PAY789' }));
handlePaymentResponse(Promise.resolve({ status: 'FAILED', reason: 'INSUFFICIENT_FUNDS' }));
handlePaymentResponse(Promise.resolve({ status: 'PENDING', retriesRemaining: 2 }));
handlePaymentResponse(Promise.resolve({ status: 'ERROR', message: 'Database unreachable' }));
ãã®äŸã¯ããã¿ãŒã³ãããã³ã°ãããŸããŸãªéåæã®çµæãåŠçããäžã§ãããã«æçããšæ§é ããããããã瀺ããŠããŸããawaitããŒã¯ãŒãã«ãããmatchåŒãè©äŸ¡ããåã«responseãå®å
šã«è§£æ±ºãããå€ã§ããããšãä¿èšŒãããŸãããããŠãwhenç¯ããã®åœ¢ç¶ãšå
容ã«åºã¥ããŠããŒã¿ããšã¬ã¬ã³ãã«åè§£ããæ¡ä»¶ä»ãã§åŠçããŸãã
çŽæ¥çãªéåæãããã³ã°ã®å¯èœæ§ïŒå°æ¥ã®æšæž¬ïŒ
åæã®ãã¿ãŒã³ãããã³ã°ææ¡ã«æç€ºçã«å«ãŸããŠããããã§ã¯ãããŸããããPromisesèªäœãéåæã¹ããªãŒã ã«å¯ŸããŠããçŽæ¥çãªãã¿ãŒã³ãããã³ã°ãå¯èœã«ããå°æ¥ã®æ¡åŒµãæ³åããããšãã§ããŸããäŸãã°ãPromiseã®ãç¶æ ãïŒpending, fulfilled, rejectedïŒãObservableããå°çããå€ã«ãããã³ã°ã§ããæ§æãæ³åããŠã¿ãŠãã ããïŒ
// Purely speculative syntax for direct async matching:
async function advancedApiCall(apiPromise) {
return match (apiPromise) {
when Promise.pending => 'Loading data...', // Match on the Promise state itself
when Promise.fulfilled({ status: 200, data }) => `Data received: ${data.name}`,
when Promise.fulfilled({ status: 404 }) => 'Resource not found!',
when Promise.rejected(error) => `Error: ${error.message}`,
when _ => 'Unexpected async state'
};
}
// And for Observables (RxJS-like):
import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';
const clickStream = fromEvent(document, 'click').pipe(
map(event => ({ type: 'click', x: event.clientX, y: event.clientY }))
);
clickStream.subscribe(event => {
match (event) {
when { type: 'click', x: > 100 } => console.log(`Clicked right of center at ${event.x}`),
when { type: 'click', y: > 100 } => console.log(`Clicked below center at ${event.y}`),
when { type: 'click' } => console.log('Generic click detected'),
when _ => console.log('Unknown event')
};
});
ãããã¯æšæž¬ã®åãåºãŸãããããã¿ãŒã³ãããã³ã°ãJavaScriptã®éåæããªããã£ããšæ·±ãçµ±åãããè«ççãªæ¡åŒµã瀺ããŠããŸããçŸåšã®ææ¡ã¯ãå€ãã«çŠç¹ãåœãŠãŠããŸãããå°æ¥çã«ã¯*éåæããã»ã¹*èªäœãšã®ããè±ããªçµ±åãèŠããããããããŸããã
ã°ããŒãã«éçºã«ãããå®çšçãªãŠãŒã¹ã±ãŒã¹ãšå©ç¹
çŸåšã®åé¿çãå°æ¥ã®ãã€ãã£ãæ©èœãä»ããå ç¢ãªéåæãã¿ãŒã³è©äŸ¡ã®åœ±é¿ã¯åºå€§ã§ãããäžçäžã®éçºããŒã ã«ãšã£ãŠæçã§ãã
1. ãšã¬ã¬ã³ããªAPIã¬ã¹ãã³ã¹åŠç
ã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ã¯é »ç¹ã«å€æ§ãªAPIãšããåãããæåããšã©ãŒããŸãã¯ç¹å®ã®ããŒã¿ãåãã«å¯ŸããŠããŸããŸãªæ§é ãè¿ãããšããããããŸãããã¿ãŒã³ãããã³ã°ã¯ãããããåŠçããããã®æç¢ºã§å®£èšçãªã¢ãããŒããå¯èœã«ããŸãïŒ
async function fetchDataAndProcess(url) {
try {
const response = await fetch(url);
const json = await response.json();
// Using a pattern matching library or future native syntax:
return match ({ status: response.status, data: json })
.with({ status: 200, data: { user } }, ({ data: { user } }) => {
console.log(`User data retrieved for ${user.name}.`);
return { type: 'USER_LOADED', user };
})
.with({ status: 200, data: { product } }, ({ data: { product } }) => {
console.log(`Product data retrieved for ${product.name}.`);
return { type: 'PRODUCT_LOADED', product };
})
.with({ status: 404 }, () => {
console.warn('Resource not found.');
return { type: 'NOT_FOUND' };
})
.with({ status: P.number.gte(400), data: { message } }, ({ data: { message } }) => {
console.error(`API error: ${message}`);
return { type: 'API_ERROR', message };
})
.with(P.any, (res) => {
console.log('Unhandled API response:', res);
return { type: 'UNKNOWN_RESPONSE', res };
})
.exhaustive();
} catch (error) {
console.error('Network or parsing error:', error.message);
return { type: 'NETWORK_ERROR', message: error.message };
}
}
// Example usage:
fetchDataAndProcess('/api/user/123');
fetchDataAndProcess('/api/product/ABC');
fetchDataAndProcess('/api/nonexistent');
2. UIãã¬ãŒã ã¯ãŒã¯ã«ãããåçåãããç¶æ 管ç
çŸä»£ã®ãŠã§ãã¢ããªã±ãŒã·ã§ã³ã§ã¯ãUIã³ã³ããŒãã³ãã¯ãã°ãã°éåæã®ãç¶æ ãïŒãloadingãããsuccessãããerrorãïŒã管çããŸãããã¿ãŒã³ãããã³ã°ã¯ããªãã¥ãŒãµãŒããç¶æ ãæŽæ°ããžãã¯ãå€§å¹ ã«ã¯ãªãŒã³ã¢ããããããšãã§ããŸãã
// Example for a React-like reducer using pattern matching
// (assuming 'ts-pattern' or similar, or future native match)
import { match, P } from 'ts-pattern';
const initialState = { status: 'idle', data: null, error: null };
function dataReducer(state, action) {
return match (action)
.with({ type: 'FETCH_STARTED' }, () => ({ ...state, status: 'loading' }))
.with({ type: 'FETCH_SUCCESS', payload: { user } }, ({ payload: { user } }) => ({ ...state, status: 'success', data: user }))
.with({ type: 'FETCH_SUCCESS', payload: { product } }, ({ payload: { product } }) => ({ ...state, status: 'success', data: product }))
.with({ type: 'FETCH_FAILED', error }, ({ error }) => ({ ...state, status: 'error', error }))
.with(P.any, () => state) // Fallback for unknown actions
.exhaustive();
}
// Simulate async dispatch
async function dispatchAsyncActions() {
let currentState = initialState;
console.log('Initial State:', currentState);
// Simulate fetch start
currentState = dataReducer(currentState, { type: 'FETCH_STARTED' });
console.log('After FETCH_STARTED:', currentState);
// Simulate async operation
try {
const userData = await Promise.resolve({ id: 'user456', name: 'Jane Doe' });
currentState = dataReducer(currentState, { type: 'FETCH_SUCCESS', payload: { user: userData } });
console.log('After FETCH_SUCCESS (User):', currentState);
} catch (e) {
currentState = dataReducer(currentState, { type: 'FETCH_FAILED', error: e.message });
console.log('After FETCH_FAILED:', currentState);
}
// Simulate another fetch for a product
currentState = dataReducer(currentState, { type: 'FETCH_STARTED' });
console.log('After FETCH_STARTED (Product):', currentState);
try {
const productData = await Promise.reject(new Error('Product service unavailable'));
currentState = dataReducer(currentState, { type: 'FETCH_SUCCESS', payload: { product: productData } });
console.log('After FETCH_SUCCESS (Product):', currentState);
} catch (e) {
currentState = dataReducer(currentState, { type: 'FETCH_FAILED', error: e.message });
console.log('After FETCH_FAILED (Product):', currentState);
}
}
dispatchAsyncActions();
3. ã€ãã³ãé§åã¢ãŒããã¯ãã£ãšãªã¢ã«ã¿ã€ã ããŒã¿
WebSocketsãMQTTããŸãã¯ãã®ä»ã®ãªã¢ã«ã¿ã€ã ãããã³ã«ã§åãã·ã¹ãã ã§ã¯ãã¡ãã»ãŒãžã¯ãã°ãã°ããŸããŸãªãã©ãŒããããæã¡ãŸãããã¿ãŒã³ãããã³ã°ã¯ããããã®ã¡ãã»ãŒãžãé©åãªãã³ãã©ã«ãã£ã¹ãããããã®ãç°¡çŽ åããŸãã
// Imagine this is a function receiving messages from a WebSocket
async function handleWebSocketMessage(messagePromise) {
const message = await messagePromise;
// Using native pattern matching (when available)
match (message) {
when { type: 'USER_CONNECTED', userId, username } => {
console.log(`User ${username} (${userId}) connected.`);
// Update online user list
},
when { type: 'CHAT_MESSAGE', senderId, content: P.string.startsWith('@') } => {
console.log(`Private message from ${senderId}: ${message.content}`);
// Display private message UI
},
when { type: 'CHAT_MESSAGE', senderId, content } => {
console.log(`Public message from ${senderId}: ${content}`);
// Display public message UI
},
when { type: 'ERROR', code, description } => {
console.error(`WebSocket Error ${code}: ${description}`);
// Show error notification
},
when _ => {
console.warn('Unhandled WebSocket message type:', message);
}
};
}
// Example message simulations
handleWebSocketMessage(Promise.resolve({ type: 'USER_CONNECTED', userId: 'U1', username: 'Alice' }));
handleWebSocketMessage(Promise.resolve({ type: 'CHAT_MESSAGE', senderId: 'U1', content: '@Bob Hello there!' }));
handleWebSocketMessage(Promise.resolve({ type: 'CHAT_MESSAGE', senderId: 'U2', content: 'Good morning everyone!' }));
handleWebSocketMessage(Promise.resolve({ type: 'ERROR', code: 1006, description: 'Server closed connection' }));
4. ãšã©ãŒãã³ããªã³ã°ãšå埩åã®åäž
éåææäœã¯æ¬è³ªçã«ãšã©ãŒïŒãããã¯ãŒã¯ã®åé¡ãAPIã®å€±æãã¿ã€ã ã¢ãŠãïŒãçºçããããã§ãããã¿ãŒã³ãããã³ã°ã¯ãããŸããŸãªãšã©ãŒãåããæ¡ä»¶ãåŠçããããã®æ§é åãããæ¹æ³ãæäŸããããå埩åã®ããã¢ããªã±ãŒã·ã§ã³ã«ã€ãªãããŸãã
class CustomNetworkError extends Error {
constructor(message, statusCode) {
super(message);
this.name = 'CustomNetworkError';
this.statusCode = statusCode;
}
}
async function performOperation() {
// Simulate an async operation that might throw different errors
return new Promise((resolve, reject) => {
const rand = Math.random();
if (rand < 0.3) {
reject(new CustomNetworkError('Service Unavailable', 503));
} else if (rand < 0.6) {
reject(new Error('Generic processing error'));
} else {
resolve('Operation successful!');
}
});
}
async function handleOperationResult() {
try {
const result = await performOperation();
console.log('Success:', result);
} catch (error) {
// Using pattern matching on the error object itself
// (could be with a library or a future native 'match (error)')
match (error) {
when P.instanceOf(CustomNetworkError).and({ statusCode: 503 }) => {
console.error(`Specific Network Error (503): ${error.message}. Please try again later.`);
// Trigger a retry mechanism
},
when P.instanceOf(CustomNetworkError) => {
console.error(`General Network Error (${error.statusCode}): ${error.message}.`);
// Log details, maybe notify admin
},
when P.instanceOf(TypeError) => {
console.error(`Type-related Error: ${error.message}. This might indicate a development issue.`);
// Report bug
},
when P.any => {
console.error(`Unhandled Error: ${error.message}`);
// Generic fallback error handling
}
};
}
}
for (let i = 0; i < 5; i++) {
handleOperationResult();
}
5. ã°ããŒãã«ããŒã¿ã®ããŒã«ã©ã€ãŒãŒã·ã§ã³ãšåœéå
ç°ãªãå°ååãã«ããŒã«ã©ã€ãºããå¿ èŠãããã³ã³ãã³ããæ±ãå ŽåãéåæããŒã¿ãã§ããã¯ç°ãªãæ§é ããã©ã°ãè¿ãããšããããŸãããã¿ãŒã³ãããã³ã°ã¯ãã©ã®ããŒã«ã©ã€ãŒãŒã·ã§ã³æŠç¥ãé©çšããããæ±ºå®ããã®ã«åœ¹ç«ã¡ãŸãã
async function displayLocalizedContent(contentPromise, userLocale) {
const contentData = await contentPromise;
// Using a pattern matching library or future native syntax:
return match ({ contentData, userLocale })
.with({ contentData: { language: P.string.startsWith(userLocale) }, userLocale }, ({ contentData }) => {
console.log(`Displaying content directly for locale ${userLocale}: ${contentData.text}`);
return contentData.text;
})
.with({ contentData: { defaultText }, userLocale: 'en-US' }, ({ contentData }) => {
console.log(`Using default English content for en-US: ${contentData.defaultText}`);
return contentData.defaultText;
})
.with({ contentData: { translations }, userLocale }, ({ contentData, userLocale }) => {
if (translations[userLocale]) {
console.log(`Using translated content for ${userLocale}: ${translations[userLocale]}`);
return translations[userLocale];
}
console.warn(`No direct translation for ${userLocale}. Using fallback.`);
return translations['en'] || contentData.defaultText || 'Content not available';
})
.with(P.any, () => {
console.error('Could not process content data.');
return 'Error loading content';
})
.exhaustive();
}
// Example usage:
const frenchContent = Promise.resolve({ language: 'fr-FR', text: 'Bonjour le monde!', translations: { 'en-US': 'Hello World' } });
const englishContent = Promise.resolve({ language: 'en-GB', text: 'Hello, world!', defaultText: 'Hello World' });
const multilingualContent = Promise.resolve({ defaultText: 'Hi there', translations: { 'fr-FR': 'Salut', 'de-DE': 'Hallo' } });
displayLocalizedContent(frenchContent, 'fr-FR');
displayLocalizedContent(englishContent, 'en-US');
displayLocalizedContent(multilingualContent, 'de-DE');
displayLocalizedContent(multilingualContent, 'es-ES'); // Will use fallback or default
課é¡ãšèæ ®äºé
éåæãã¿ãŒã³è©äŸ¡ã¯å€§ããªå©ç¹ãæäŸããŸããããã®æ¡çšãšå®è£ ã«ã¯ç¹å®ã®èæ ®äºé ã䌎ããŸãïŒ
- åŠç¿æ²ç·: ãã¿ãŒã³ãããã³ã°ã«æ
£ããŠããªãéçºè
ã¯ãç¹ã«åœä»€çãª
"if"/"else"æ§é ã«æ £ããŠããå Žåã宣èšçãªæ§æãšæŠå¿µãæåã¯é£ãããšæãããããããŸããã - ããŒã«ãšIDEã®ãµããŒã: ãã€ãã£ãã®ãã¿ãŒã³ãããã³ã°ã«ã¯ãéçºãæ¯æŽããšã©ãŒãé²ãããã®å
ç¢ãªããŒã«ïŒãªã³ã¿ãŒããã©ãŒããã¿ãŒãIDEã®èªåè£å®ïŒãäžå¯æ¬ ã«ãªããŸãã
ts-patternã®ãããªã©ã€ãã©ãªã¯ããã®ããã«æ¢ã«TypeScriptãæŽ»çšããŠããŸãã - ããã©ãŒãã³ã¹: äžè¬çã«ã¯æé©åãããŠããŸãããéåžžã«å€§ããªããŒã¿æ§é ã«å¯Ÿããæ¥µç«¯ã«è€éãªãã¿ãŒã³ã¯ãçè«çã«ã¯ããã©ãŒãã³ã¹ã«åœ±é¿ãäžããå¯èœæ§ããããŸããç¹å®ã®ãŠãŒã¹ã±ãŒã¹ã§ã®ãã³ãããŒã¯ãå¿ èŠã«ãªãå ŽåããããŸãã
- ç¶²çŸ
æ§ãã§ãã¯: ãã¿ãŒã³ãããã³ã°ã®éèŠãªå©ç¹ã¯ããã¹ãŠã®ã±ãŒã¹ãåŠçãããããšãä¿èšŒããããšã§ãã匷åãªèšèªã¬ãã«ãŸãã¯åã·ã¹ãã ã®ãµããŒãïŒTypeScriptãš
ts-patternã®exhaustive()ãªã©ïŒããªããã°ãã±ãŒã¹ãèŠéããŠã©ã³ã¿ã€ã ãšã©ãŒã«ã€ãªããå¯èœæ§ããããŸãã - éå°ãªè€éå: éåžžã«åçŽãªéåæå€ã®ãã§ãã¯ã«ã¯ãå®å
šãªãã¿ãŒã³ã®ãããããããããåçŽãª
if (await promise) { ... }ã®æ¹ããŸã èªã¿ããããããããŸããããã€ãã¿ãŒã³ãããã³ã°ãé©çšããããç¥ãããšãéèŠã§ãã
éåæãã¿ãŒã³è©äŸ¡ã®ããã®ãã¹ããã©ã¯ãã£ã¹
éåæãã¿ãŒã³ãããã³ã°ã®å©ç¹ãæå€§éã«æŽ»çšããããã«ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãæ€èšããŠãã ããïŒ
- æåã«Promiseã解決ãã: çŸåšã®ãã¯ããã¯ãåæã®ãã€ãã£ãææ¡ã䜿çšããå Žåããã¿ãŒã³ãããã³ã°ãé©çšããåã«ãåžžã«Promiseã
awaitãããããã®è§£æ±ºãåŠçããŠãã ãããããã«ãããPromiseãªããžã§ã¯ãèªäœã§ã¯ãªããå®éã®ããŒã¿ã«å¯ŸããŠãããã³ã°ãè¡ã£ãŠããããšãä¿èšŒãããŸãã - å¯èªæ§ãåªå ãã: ãã¿ãŒã³ãè«ççã«æ§æããŠãã ãããé¢é£ããæ¡ä»¶ãã°ã«ãŒãåããŸããæœåºããããå€ãã«ã¯æå³ã®ãã倿°åã䜿çšããŠãã ãããç®æšã¯ãè€éãªããžãã¯ãããæœè±¡çã«ããã®ã§ã¯ãªãã*èªã¿ããã*ããããšã§ãã
- ç¶²çŸ
æ§ã確ä¿ãã: ãã¹ãŠã®å¯èœãªããŒã¿åœ¢ç¶ãšç¶æ
ãåŠçããããåªããŠãã ãããç¹ã«éçºäžã¯ãäºæããªãå
¥åããã£ããããããã«
defaultãŸãã¯_ïŒã¯ã€ã«ãã«ãŒãïŒã±ãŒã¹ããã©ãŒã«ããã¯ãšããŠäœ¿çšããŠãã ãããTypeScriptã§ã¯ãåŒå¥ãããå ±çšäœãå®çŸ©ããŠç¶æ ãå®çŸ©ããã³ã³ãã€ã©ã«ããç¶²çŸ æ§ãã§ãã¯ã匷å¶ããŠãã ããã - åå®å
šæ§ãšçµã¿åããã: TypeScriptã䜿çšããŠããå Žåã¯ãéåæããŒã¿æ§é ã®ã€ã³ã¿ãŒãã§ãŒã¹ãŸãã¯ãåããå®çŸ©ããŠãã ãããããã«ããããã¿ãŒã³ãããã³ã°ãã³ã³ãã€ã«æã«åãã§ãã¯ãããã©ã³ã¿ã€ã ã«å°éããåã«ãšã©ãŒããã£ããã§ããŸãã
ts-patternã®ãããªã©ã€ãã©ãªã¯ããã®ããã«TypeScriptãšã·ãŒã ã¬ã¹ã«çµ±åãããŸãã - ã¬ãŒããè³¢ã䜿ã: ã¬ãŒãïŒãã¿ãŒã³å
ã®
"if"æ¡ä»¶ïŒã¯åŒ·åã§ããããã¿ãŒã³ãã¹ãã£ã³ãã«ããããå¯èœæ§ããããŸããæ§é ã ãã§è¡šçŸã§ããªãç¹å®ã®è¿œå æ¡ä»¶ã«äœ¿çšããŠãã ããã - 䜿ããããªã: åçŽãªäºé
æ¡ä»¶ïŒäŸïŒ
"if (value === true)"ïŒã«ã¯ãåçŽãª"if"æã®æ¹ãæç¢ºãªããšãå€ãã§ããè€æ°ã®ç°ãªãããŒã¿åœ¢ç¶ãç¶æ ããŸãã¯è€éãªæ¡ä»¶ããžãã¯ãæã€ã·ããªãªã®ããã«ãã¿ãŒã³ãããã³ã°ãäºçŽããŠãã ããã - 培åºçã«ãã¹ããã: ãã¿ãŒã³ãããã³ã°ã®åå²çãªæ§è³ªãèãããšãå æ¬çãªåäœãã¹ããšçµ±åãã¹ãã¯ãç¹ã«éåæã³ã³ããã¹ãã§ãã¹ãŠã®ãã¿ãŒã³ãæåŸ ã©ããã«åäœããããšã確èªããããã«äžå¯æ¬ ã§ãã
çµè«ïŒéåæJavaScriptã®ãã衚çŸåè±ããªæªæ¥
JavaScriptã¢ããªã±ãŒã·ã§ã³ãè€éããå¢ãç¶ããç¹ã«éåæããŒã¿ãããŒãžã®äŸå床ãé«ãŸãã«ã€ããŠãããæŽç·Žããã衚çŸåè±ããªå¶åŸ¡ãããŒã¡ã«ããºã ãžã®èŠæ±ã¯åŠå®ã§ããŸãããéåæãã¿ãŒã³è©äŸ¡ã¯ãåå²ä»£å ¥ãšæ¡ä»¶ããžãã¯ã®çŸåšã®è³¢ãçµã¿åããã«ãã£ãŠéæããããããããã¯ç±å¿ã«æåŸ ãããŠãããã€ãã£ããã¿ãŒã³ãããã³ã°ææ¡ãä»ããŠéæããããã«ãããããã倧ããªåé²ã衚ããŠããŸãã
éçºè ãã¢ããªã±ãŒã·ã§ã³ã倿§ãªéåæã®çµæã«ã©ã®ããã«åå¿ãã¹ããã宣èšçã«å®çŸ©ã§ããããã«ããããšã§ããã¿ãŒã³ãããã³ã°ã¯ããã¯ãªãŒã³ã§ãããå ç¢ã§ãããä¿å®æ§ã®é«ãã³ãŒããçŽæããŸããããã¯ãã°ããŒãã«ãªéçºããŒã ãè€éãªAPIçµ±åãå ¥ãçµãã UIã®ãç¶æ ã管çãããã³åçãªãªã¢ã«ã¿ã€ã ããŒã¿åŠçã«ãåäŸã®ãªãæçããšèªä¿¡ãæã£ãŠåãçµãããšãå¯èœã«ããŸãã
JavaScriptã«ãããå®å šã«çµ±åããããã€ãã£ããªéåæãã¿ãŒã³ãããã³ã°ãžã®éã®ãã¯ãŸã ç¶ããŠããŸãããããã§è°è«ãããååãšæ¢åã®ãã¯ããã¯ã¯ã仿¥ããªãã®ã³ãŒãå質ãåäžãããããã®å³æã®éçãæäŸããŸãããããã®ãã¿ãŒã³ãåãå ¥ããé²åããJavaScriptèšèªææ¡ã«ã€ããŠã®æ å ±ãåžžã«åŸãŠãéåæéçºã®åãçµã¿ã«ãããŠæ°ããªã¬ãã«ã®ãšã¬ã¬ã³ã¹ãšå¹çæ§ãè§£ãæŸã€æºåãããŠãã ããã